<template>
  <div id="btn" :class="position">
    <div class="green" @click="toGreen">
      {{textGreen}}
    </div>
    <div class="orange" @click="go([$router,orangeUrl])">
      {{textOrange}}
    </div>
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default{
    name:'nav-btn',
    props:['textGreen','textOrange','position','greenUrl','orangeUrl'],
    methods:{
      toGreen:function(){
        this.$router.push({path:this.greenUrl})
      },
      toOrange:function(){
        this.$router.push({path:this.orangeUrl})
      },
      ...mapMutations([
        "go"
      ])
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/css/variables.less";
  #btn{
    /*position:fixed;*/
    bottom:0;
    width:100%;
    height:50px;
    /*background:#eee;*/
    /*opacity: .1;*/
    box-sizing: border-box;
    padding:0 20px;
  }
  .realtive{position:relative;}
  .fixed{position:fixed;}
  #btn div{
    /*postion:realtive;*/
    text-align:center;
    /*margin:10px 20px;*/
    padding:3px 0;
    letter-spacing: 2px;
    color:@white;
  }
  .orange{
    box-sizing: border-box;
    background:@orange;
    display:inline-block;
    width:50%;
    border-bottom-right-radius: 14px;
    border-top-right-radius: 14px;
    float:left;
    /*!*margin-rigt:20px;*!*/
  }
  .green{
    box-sizing: border-box;
    background:@green;
    display:inline-block;
    width:50%;
    border-bottom-left-radius: 14px;
    border-top-left-radius: 14px;
    float:left;
    /*!*margin-left: 20px;*!*/
  }
</style>
